<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>键盘按下事件</title>
	</head>
	<style>
		.box{
			margin: 50px auto;
			width: 50px;
			height: 50px;
			background: red;
		}
	</style>
	<body>
		<div class="box"></div>
		<script src="../jquery-1.12.4.min.js"></script>
		<script>
			var ele=$('.box');
			$(document).keydown(
				function(){
					var opt=event.which;
					var left=ele.offset().left;
					var top=ele.offset().top;
					switch(opt){
						case 37:
						     ele.offset({
						     	top:top,
						     	left:left-1
						     });
						     break;
						case 38:
                             ele.offset({
                             	top:top-1,
                             	left:left
                             });
                             break
                        case 39:
						     ele.offset({
						     	top:top,
						     	left:left+1
						     });
						     break
						case 40:
						     ele.offset({
						     	top:top+1,
						     	left:left
						     });   
						     break
					}
				}
			)
		</script>
	</body>
</html>
